<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<title>
	${hotelInstance?.name }
</title>
<script
	src="${resource(dir: 'js', file: 'bootstrap-rating-input.min.js')}"
	type="text/javascript"></script>

<style type="text/css">
.detailBox {
	width: 320px;
	border: 1px solid #bbb;
	margin: 50px;
}

.titleBox {
	background-color: #fdfdfd;
	padding: 10px;
}

.titleBox label {
	color: #444;
	margin: 0;
	display: inline-block;
}

.commentBox {
	padding: 10px;
	border-top: 1px dotted #bbb;
}

.commentBox .form-group:first-child,.actionBox .form-group:first-child {
	width: 80%;
}

.commentBox .form-group:nth-child(2),.actionBox .form-group:nth-child(2)
	{
	width: 18%;
}

.actionBox .form-group * {
	width: 100%;
}

.taskDescription {
	margin-top: 10px 0;
}

.commentList {
	padding: 0;
	list-style: none;
	max-height: 200px;
	overflow: auto;
}

.commentList li {
	margin: 0;
	margin-top: 10px;
}

.commentList li>div {
	display: table-cell;
}

.commenterImage {
	width: 30px;
	margin-right: 5px;
	height: 100%;
	float: left;
}

.commenterImage img {
	width: 100%;
	border-radius: 50%;
}

.commentText p {
	margin: 0;
}

.sub-text {
	color: #aaa;
	font-family: verdana;
	font-size: 11px;
}

.actionBox {
	border-top: 1px dotted #bbb;
	padding: 10px;
}
</style>

<script>
	$(function() {
		$('#rate_id').on('change', function() {
			alert("ok?");
			$('#userRatingFormId').submit();
		});
	});
</script>
</head>
<body>
	<div class="header">

		<h1 class="page-title">Welcome</h1>
		<ul class="breadcrumb">
			<li><a href="${createLink(uri: '/')}"><g:message
						code="default.home.label" /></a></li>

			<li><g:link controller="review" action="state"
					id="${hotelInstance?.city?.parent?.id }">
					${hotelInstance?.city?.parent?.name?.encodeAsHTML() }
				</g:link></li>
			<li><g:link controller="review" action="city"
					id="${hotelInstance?.city?.id }">
					${hotelInstance?.city?.name?.encodeAsHTML() }
				</g:link></li>
			<li class="active">
				${hotelInstance?.name }
			</li>
		</ul>

	</div>
	<div class="main-content">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="header">
						<h1 class="page-title">
							${hotelInstance?.name }
						</h1>
					</div>
				</div>
			</div>
			<div class="row">
                                <div class="col-md-3">
                                  <img src="${resource(dir: 'images', file: 'no_picture.gif')}" width="220" height="125"/>
                                </div>
				<div class="col-md-5">

					<div class="container-fluid">
						<div class="row">
							<div class="col-md-4">Star Rating</div>
							<div class="col-md-8">
								${hotelInstance?.starRating?.name }
							</div>
						</div>
						<div class="row">
							<div class="col-md-4">Address</div>
							<div class="col-md-8">

								<address>
									<strong> ${hotelInstance?.name }
									</strong><br>
									${hotelInstance?.address1 }<br>
									${hotelInstance?.address2 }<br>
									${hotelInstance?.city?.name?.encodeAsHTML() }
									${hotelInstance?.city?.parent?.name?.encodeAsHTML() }<br> <abbr
										title="Phone">P:</abbr>
									${hotelInstance?.generalLine }<br> <abbr title="Website">W:</abbr>
									${hotelInstance?.website }
								</address>


							</div>
						</div>

					</div>
				</div>
				<div class="col-md-4">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-4">User Ratings</div>
							<div class="col-md-8">
								<g:form name="userRatingFormId" action="rate"
									controller="review">
									<g:hiddenField name="id" value="${hotelInstance?.id}" />
									<p>
										<input type="number" value="${hotelInstance?.rate }"
											readonly="true" name="rate" id="rate_id" class="rating"
											data-icon-lib="fa" data-active-icon="fa-heart"
											data-inactive-icon="fa-heart-o" /> (${hotelInstance?.noOfVote }
										votes)
									</p>
								</g:form>
							</div>
						</div>
						<div class="row">
							<div class="col-md-4">Total Reviews</div>
							<div class="col-md-8">${hotelInstance?.entries?.size() }</div>
						</div>
						<div class="row">
							<div class="col-md-4">Total Blogs Reviews</div>
							<div class="col-md-8">${hotelInstance?.comments?.size() }</div>
						</div>
						<div class="row">
							<div class="col-md-4">Total View </div>
							<div class="col-md-8">${hotelInstance?.noOfView() }</div>
						</div>

					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-8">
					<div class="header">
						<h1 class="page-title">Blogs Review</h1>
					</div>
					<ul class="commentList">
					<g:each in="${hotelInstance?.entries }" var="blogEntryInstance">
								<li>
									<div class="commenterImage">
										<img src="${resource(dir: 'images', file: 'p1.jpeg')}" />
									</div>
									<div class="commentText">
										<p class="">${blogEntryInstance?.title }</p>
										<p class=""><a target="_blank" href="${blogEntryInstance?.url }">${blogEntryInstance?.blog?.name }</a></p>
										
										<input type="number" value=""
											readonly="true" class="rating"
											data-icon-lib="fa" data-active-icon="fa-heart"
											data-inactive-icon="fa-heart-o" />
                                                                                
                                                                                <div class="well">
                                                                                  <g:if test="${blogEntryInstance?.entrySummary}">
                                                                                  ${blogEntryInstance?.entrySummary}
                                                                                  </g:if><g:else>
                                                                                    Ketika Percutian di Pulau Langkawi bulan lepas, kami sempat menginap 2 malam di Holiday Villa Langkawi. Lokasinya yang agak strategik terletak di Pantai Tengah tidak jauh dari Pantai Cenang dan destinasi menarik yang lain di Pulau Langkawi. Agak cantik Holiday Villa Beach & Resort Langkawi ini. Terletak di tepi pantai dan berdekatan dengan jalan utama.
                                                                                  </g:else>
                                                                                  <br>
                                                                                  <a target="_blank" href="${blogEntryInstance?.url }"> More</a>
                                                                                </div>

									</div>
                                                                  
								</li>
								</g:each>
							</ul>
				</div>
				<div class="col-md-4">

					<div class="detailBox">
						<div class="titleBox">
							<label>Comment Box </label>
							<button type="button" class="close" aria-hidden="true">&times;</button>
						</div>
						<div class="actionBox">
							<ul class="commentList">
								<g:each in="${hotelInstance?.comments }" var="commentInstance">
								<li>
									<div class="commenterImage">
										<img src="${resource(dir: 'images', file: 'p1.jpeg')}" />
									</div>
									<div class="commentText">
										<p class="">${commentInstance?.commentVal }</p>
										<span class="date sub-text">on <g:formatDate format="yyyy-MM-dd" date="${commentInstance?.createDate}"/></span>

									</div>
								</li>
								</g:each>
							<sec:ifLoggedIn>
							<g:form class="form-inline" role="form" controller="my" action="addComment">
							
								<div class="form-group">
								<input type="hidden" name="id" value="${hotelInstance.id }"/>
									<input class="form-control"  type="text"
										name="commentVal" placeholder="Your comments" />
								</div>
								<div class="form-group">
									<button class="btn btn-default">Add</button>
								</div>
							</g:form>
							
							</sec:ifLoggedIn>
							<sec:ifNotLoggedIn>
							<g:link controller="my" action="comment" id="${hotelInstance.id }">Login/Signup</g:link>
							</sec:ifNotLoggedIn>
						</div>
					</div>

				</div>
			</div>
		</div>


	</div>
</body>
</html>
